import React, { FC } from "react";
import useGetQuestionData from "../../hooks/useGetQuestionData";
import style from "./index.module.scss";
import classNames from "classnames/bind";
import Canvaswrapper from "./Canvaswrapper";
import { useDispatch } from "react-redux";
import { changeSelectedId } from "../../store/componentReducer";
import LeftPanel from "./LeftPanel";
import RightPanel from "./RightPanel";
import EditorHead from "./EditorHead";
const CBN = classNames.bind(style);

const QuestionEdit: FC = () => {
  const { loading, error } = useGetQuestionData();
  const dispatch = useDispatch();
  //取消组件的选中状态
  function clearSelectId() {
    dispatch(changeSelectedId(""));
  }

  return (
    <div className={CBN("QuestionEdit")}>
      {/* <div className={CBN("header")}>我是头部区域</div> */}
      <EditorHead></EditorHead>
      <div className={CBN("container")}>
        <div className={CBN("left")}>
          <LeftPanel></LeftPanel>
        </div>
        <div className={CBN("middle")} onClick={clearSelectId}>
          <div className={CBN("canvaswrapper")}>
            {/* <div>测试画布</div> */}
            <Canvaswrapper loading={loading}></Canvaswrapper>
          </div>
        </div>
        <div className={CBN("right")}>
          <RightPanel></RightPanel>
        </div>
      </div>
    </div>
  );
};
export default QuestionEdit;
